<template>
	<scroll-view
	class="sv-list"
	scroll-y="true"
	style="padding: 3rpx;height: 100%;width: 100%;">
	<!-- 全部页面 -->
		
		<view class="list" style=""
		v-for="(item,index) in clist" 
		:key="index">
			<view class="list-box" >
				<view style="color:#ff0202">¥<text class="font-80">{{item.price}}</text></view>
				<text class="font-18" style="color:#b04b03;">{{item.tip}}</text>
			</view>
			<view class="list-box-middle" style="">
				<text class="font-31 m-b-10" >{{item.title}}</text>
				<text class="font-22" style="color: #6d6d6d;">{{item.time}}</text>
			</view>
			<button :disabled="item.disabled">{{item.text}}</button>
		</view>
	
	</scroll-view>
</template>

<script>

	export default {
		
		data() {
			return {
				num:0,
				clist:[
				{
					price:10,
					tip:'满15元可用',
					title:'无门槛优惠卷',
					time:'有效期：2022.3.25-2022.3.31',
					text:'已过期',
					disabled:true
				},
				
				]
			}
		},
		
		
	}
</script>
<style lang="scss" scope>
	.sv-list{
		swiper-item{
			height: 100%;
		}
		.list{
			background-color: white;
			border-radius: 10rpx;
			border: 1rpx solid white;
			display: flex;
			text-align: center;
			width: 650rpx;
			height: 182rpx;
			margin: 0 auto;
			margin-top: 33rpx;
			padding-left:22rpx;
			padding-right:22rpx;
			
			.list-box{
				display: flex;
				flex-direction: column;
				margin-top: 10rpx;
			}
			.list-box-middle{
				display: flex;
				flex-direction: column;
				text-align: left;
				margin-left: 56rpx;
				margin-top: 40rpx;
			}
			button{
				border: 2rpx solid #deaa54;
				border-radius: 50rpx;
				height:37rpx;
				color:#deaa54;
				width: 140rpx;
				margin-top:63rpx;
				color:#deaa54;
				font-size: small;
				line-height: 37rpx;
			}
		}
		
	}
	//修改uView tabs字体大小
	.u-tabs__wrapper__nav__item /deep/ .u-tabs__wrapper__nav__item__text.data-v-3b2b1a80 {
		font-size: 12px;
	}
	//修改uView tabs背景颜色
	.u-tabs__wrapper__scroll-view /deep/ .view.data-v-3b2b1a80,
	scroll-view.data-v-3b2b1a80,
	swiper-item.data-v-3b2b1a80 {
		background-color: white;
	}
	//设置页面背景颜色
	page {
		background-color: #f1f2f8;
	}
	// 去掉button按钮的默认边框
	button::after{
		border: none;
	}
	//修改button禁用样式
	button[disabled]{
		color:black !important;
		background-color: #cfcece !important;
		border:2rpx solid #cfcece !important;
	}
	
</style>
